<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"
        />
        <title>LibreSpeed Example</title>
        <link rel="shortcut icon" href="favicon.ico" />
        <script type="text/javascript" src="speedtest.js"></script>
        <script type="text/javascript">
            //INITIALIZE SPEEDTEST
            var s = new Speedtest(); //create speedtest object
            s.onupdate = function (data) {
                //callback to update data in UI
                I("ip").textContent = data.clientIp;
                I("dlText").textContent =
                    data.testState == 1 && data.dlStatus == 0
                        ? "..."
                        : data.dlStatus;
                I("ulText").textContent =
                    data.testState == 3 && data.ulStatus == 0
                        ? "..."
                        : data.ulStatus;
                I("pingText").textContent = data.pingStatus;
                I("jitText").textContent = data.jitterStatus;
            };
            s.onend = function (aborted) {
                //callback for test ended/aborted
                I("startStopBtn").className = ""; //show start button again
                if (aborted) {
                    //if the test was aborted, clear the UI and prepare for new test
                    initUI();
                }
            };

            function startStop() {
                //start/stop button pressed
                if (s.getState() == 3) {
                    //speedtest is running, abort
                    s.abort();
                } else {
                    //test is not running, begin
                    s.start();
                    I("startStopBtn").className = "running";
                }
            }

            //function to (re)initialize UI
            function initUI() {
                I("dlText").textContent = "";
                I("ulText").textContent = "";
                I("pingText").textContent = "";
                I("jitText").textContent = "";
                I("ip").textContent = "";
            }

            function I(id) {
                return document.getElementById(id);
            }
        </script>

        <style type="text/css">
            html,
            body {
                border: none;
                padding: 0;
                margin: 0;
                background: #ffffff;
                color: #202020;
            }
            body {
                text-align: center;
                font-family: "Roboto", sans-serif;
            }
            h1 {
                color: #404040;
            }
            #startStopBtn {
                display: inline-block;
                margin: 0 auto;
                color: #6060aa;
                background-color: rgba(0, 0, 0, 0);
                border: 0.15em solid #6060ff;
                border-radius: 0.3em;
                transition: all 0.3s;
                box-sizing: border-box;
                width: 8em;
                height: 3em;
                line-height: 2.7em;
                cursor: pointer;
                box-shadow: 0 0 0 rgba(0, 0, 0, 0.1),
                    inset 0 0 0 rgba(0, 0, 0, 0.1);
            }
            #startStopBtn:hover {
                box-shadow: 0 0 2em rgba(0, 0, 0, 0.1),
                    inset 0 0 1em rgba(0, 0, 0, 0.1);
            }
            #startStopBtn.running {
                background-color: #ff3030;
                border-color: #ff6060;
                color: #ffffff;
            }
            #startStopBtn:before {
                content: "Start";
            }
            #startStopBtn.running:before {
                content: "Abort";
            }
            #test {
                margin-top: 2em;
                margin-bottom: 12em;
            }
            div.testArea {
                display: inline-block;
                width: 14em;
                height: 9em;
                position: relative;
                box-sizing: border-box;
            }
            div.testName {
                position: absolute;
                top: 0.1em;
                left: 0;
                width: 100%;
                font-size: 1.4em;
                z-index: 9;
            }
            div.meterText {
                position: absolute;
                bottom: 1.5em;
                left: 0;
                width: 100%;
                font-size: 2.5em;
                z-index: 9;
            }
            #dlText {
                color: #6060aa;
            }
            #ulText {
                color: #309030;
            }
            #pingText,
            #jitText {
                color: #aa6060;
            }
            div.meterText:empty:before {
                color: #505050 !important;
                content: "0.00";
            }
            div.unit {
                position: absolute;
                bottom: 2em;
                left: 0;
                width: 100%;
                z-index: 9;
            }
            div.testGroup {
                display: inline-block;
            }
            @media all and (max-width: 65em) {
                body {
                    font-size: 1.5vw;
                }
            }
            @media all and (max-width: 40em) {
                body {
                    font-size: 0.8em;
                }
                div.testGroup {
                    display: block;
                    margin: 0 auto;
                }
            }
        </style>
    </head>
    <body>
        <h1>LibreSpeed Example</h1>
        <div id="startStopBtn" onclick="startStop()"></div>
        <div id="test">
            <div class="testGroup">
                <div class="testArea">
                    <div class="testName">Download</div>
                    <div id="dlText" class="meterText"></div>
                    <div class="unit">Mbps</div>
                </div>
                <div class="testArea">
                    <div class="testName">Upload</div>
                    <div id="ulText" class="meterText"></div>
                    <div class="unit">Mbps</div>
                </div>
            </div>
            <div class="testGroup">
                <div class="testArea">
                    <div class="testName">Ping</div>
                    <div id="pingText" class="meterText"></div>
                    <div class="unit">ms</div>
                </div>
                <div class="testArea">
                    <div class="testName">Jitter</div>
                    <div id="jitText" class="meterText"></div>
                    <div class="unit">ms</div>
                </div>
            </div>
            <div id="ipArea">IP Address: <span id="ip"></span></div>
        </div>
        <a href="https://github.com/masx200/speedtest-go">Source code</a>
        <script type="text/javascript">
            initUI();
        </script>
    </body>
</html>
